<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>			
		<title>首页</title>
		<link rel="icon" href=""/>
		<link rel="stylesheet" type="text/css" href="../wwwroot/bootstrap/css/bootstrap.css"/>
		<style type="text/css">
			*{
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}
			html{
				width: 100%;
				height: 100%;
			
				font-size: 100px;
			}
			body{
				width: 100%;
				height: 100%;
				font-size: 0.2rem !important;
				overflow-x: hidden;
			}
			header,nav,footer,aside{
				width: 100%;
				margin: 0;
				padding: 0;
			}
			header{
				background-color: lightblue;
			}
			ul,ol,li{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: #333333;
			}
			a:hover{
				text-decoration: none;
				color: #333333;
			}
			.img-use{
				width: 0.5rem;
				height: 0.5rem;
				border-radius:50% ;
				box-sizing: border-box;
				border: 2px solid lightblue;
				/*display: block;*/
				vertical-align: bottom;
				margin-right: 0.1rem;
			}
			img{
				width: 0.5rem;
				height: 0.5rem;
			}
		</style>
	</head>
	<body>
		<div id="main" data-slide=false style="position: absolute;z-index: 900;top: 0; box-shadow:0 0 20px 5px black ;width: 100%;top:0.7rem ;" >
		<header id="indexHead" style="position: fixed;top: 0;z-index: 999;">
				<div class="container text-center" style="background-color: lightblue;padding: 0.1rem;position: relative;height: 0.7rem;padding: 0.1rem;">			
					<button id="side-coll" class="btn btn-default pull-left"  >
						<span class="glyphicon glyphicon-align-justify" ></span>
					</button>			
					<button id="mes-cpe"  style="border-radius:50%;width:0.3rem;height:0.3rem;border: none;position: absolute;left:1rem;top:0.25rem;background-color: white;">				
						<span  class="glyphicon glyphicon-bell"  > </span>
					</button>				
					<div style="display: inline-block;position: absolute;left: 45%;top:0.15rem">					
						<span id="title" style="font-size: 0.3rem;color: white;">主题</span>
					</div>
					<button id="search" class="btn btn-default pull-right">
						<span class="glyphicon glyphicon-search" ></span>
					</button>
				</div>	
				<div class="messageBox" style="position: absolute;width: 100%;z-index: 1000;display: none;">
					<ul class="list-group">
						<li class="list-group-item">
							您关注的主题有新的回复
						</li>
						<li class="list-group-item">
							您关注的主题有新的回复
						</li>
					</ul>
				</div>		
			</header>
		
		<article style="background-color: white; ">
			<div class="container" >
				<section style="margin-top: 0.1rem;">
					<a href="">
					<div class="panel panel-default">
						<div class="panel-heading">
							<span class="pull-left">1132020202&nbsp;</span> 
								<span>udsauuds</span>
								<span class="pull-right">2017-02-01</span>
								<span class="pull-right" >03:32下午,</span>	
						</div>
						<div class="panel-body">
							<div class="list-group-item ">
								
								<div class="list-group-item-heading" >
									<span class="glyphicon glyphicon-thum
										bs-up pull-right"></span>	
									<p>标题:<span>无标题</span></p>
									<img class="img-use" src="../wwwroot/bootstrap/img/282a35fae6cd7b897af70f3b0a2442a7d8330e98.jpg"/><span style="font-size: 20px;">:</span>
								</div>
								<div class="list-group-item-text" style="word-wrap: break-word;">
									dwakdawhduahiudhawihdaiwuhdiwahdiuawdawhiudwaldawijdawiojdawoi
									<img src="../wwwroot/bootstrap/img/282a35fae6cd7b897af70f3b0a2442a7d8330e98.jpg"/>ewqeqweqwe
								</div>
								</div>
								
							</div>
							
							
					
						<div class="panel-footer" style="position: relative;height: 0.3rem;line-height: 0.3rem;">
								<span class="glyphicon glyphicon-comment" style="position: absolute;right: 0.5rem;top: 0.05rem;"></span>
								<span id="thumbs-up-count" class="badge" style="position: absolute;right: 0.1rem;top: 0.01rem;">0</span>
						</div>
					</div>
					</a>
				</section>
				<section style="margin-top: 0.1rem;">
					
					</div>
				</section>
				<section style="margin-top: 0.1rem;">
					<div class="panel panel-default">
						<div class="panel-heading">
							<span class="pull-left">1132020202&nbsp;</span> 
								<span>udsauuds</span>
								<span class="pull-right">2017-02-01</span>
								<span class="pull-right" >03:32下午,</span>	
						</div>
						<div class="panel-body">
							<div class="list-group-item ">							
								<div class="list-group-item-heading" >
									<span class="glyphicon glyphicon-thum
										bs-up pull-right"></span>	
									<p>标题:<span>无标题</span></p>
									<img class="img-use" src="../wwwroot/bootstrap/img/282a35fae6cd7b897af70f3b0a2442a7d8330e98.jpg"/><span style="font-size: 20px;">:</span>
								</div>
								<div class="list-group-item-text" style="word-wrap: break-word;">
									dwakdawhduahiudhawihdaiwuhdiwahdiuawdawhiudwaldawijdawiojdawoi
									<img src="../wwwroot/bootstrap/img/282a35fae6cd7b897af70f3b0a2442a7d8330e98.jpg"/>ewqeqweqwe
								</div>
							</div>							
						</div>				
						<div class="panel-footer" style="position: relative;height: 0.3rem;">
								<span class="glyphicon glyphicon-comment" style="position: absolute;right: 0.3rem;top: 0.05rem;"></span>
								<span id="thumbs-up-count" style="position: absolute;right: 0.1rem;top: 0.001rem;">0</span>
						</div>
					</div>
				</section>
			</div>
			
				
			
		</article>
		
		<div id="loading" class="list-group-item text-center" style="margin-bottom: 0.5rem;">
				<span>下拉加载</span>
			</div>
			
			<footer style="width: 100%;background-color: lightblue;position: fixed;bottom: 0;">
				<div class="container" style="padding: 0.2rem;">
					<a href="" class="pull-left text-center" style="width: 33%;"><span class="glyphicon glyphicon-home"></span></a>
					<a href=""  class="pull-left text-center"style="width: 33%;"><span class="glyphicon glyphicon-plus"></span></a>
					<a href=""class="pull-left text-center" style="width: 33%;"><span class="glyphicon glyphicon-user"></span></a>
				</div>
			</footer>
		</div>
		
		
		<aside style="position: absolute;top: 0;z-index: 800;height: 100%;padding-right: 1rem;top:0.7rem;height: 100%;">
			<!--<div class="container">-->
				<header id="slideHead" style="position: fixed;top: 0;z-index: 800;" >
				<div class="container text-center" style="background-color: lightblue;padding: 0.1rem;height: 0.7rem;">			
								
					<div style="display: inline-block;">					
						<span id="title" style="font-size: 0.3rem;color: white;">主题</span>
					</div>
				
				</div>	
				
			</header>
				<div class="panel panel-default" style="position: fixed;top:0.7rem;width: 85%;height: 100%;">
					<div class="panel-heading" >
						
							<!--<button type="button" class="btn btn-default">-->
							
							<div class="input-group">
								<botton class="input-group-addon ">
									<span class="glyphicon glyphicon-search"></span>
								</botton>								
								<input type="search" name="" id="" value="" class="form-control" />
							</div>
						
					</div>
					
						
					
					<div class="panel-body" style="overflow: scroll;height: 7rem;">
						<img src="../wwwroot/imgs/join.gif" style="width: 1rem;height: 1rem;"/>
						<ul class="list-group">
							<li  class="list-group-item mydropdown">
								<a href="" >综合版
								<span class="glyphicon glyphicon-chevron-right pull-right" data-open=false;></span></a>
								
							</li>
							
								<ul class="list-group my-menu" style="padding-right: 0.5rem;display: none;">
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									
								</ul>	
							<li  class="list-group-item mydropdown">
								<a href="" >综合版
								<span class="glyphicon glyphicon-chevron-right pull-right" data-open=false;></span></a>
								
							</li>
							
								<ul class="list-group my-menu" style="padding-right: 0.5rem;display: none;">
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									
								</ul>	
							<li  class="list-group-item mydropdown">
								<a href="" >综合版
								<span class="glyphicon glyphicon-chevron-right pull-right" data-open=false;></span></a>
								
							</li>
							
								<ul class="list-group my-menu" style="padding-right: 0.5rem;display: none;">
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									
								</ul>	
							<li  class="list-group-item mydropdown">
								<a href="" >综合版
								<span class="glyphicon glyphicon-chevron-right pull-right" data-open=false;></span></a>
								
							</li>
							
								<ul class="list-group my-menu" style="padding-right: 0.5rem;display: none;">
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									
								</ul>	
							<li  class="list-group-item mydropdown">
								<a href="" >综合版
								<span class="glyphicon glyphicon-chevron-right pull-right" data-open=false;></span></a>
								
							</li>
							
								<ul class="list-group my-menu" style="padding-right: 0.5rem;display: none;">
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									<li class="list-group-item"><a href="" style="width: 100%;display: inline-block;">天气</a></li>
									
								</ul>	
							<li  class="list-group-item mydropdown">
								<a href="" >综合版
								<span class="glyphicon glyphicon-chevron-right pull-right" data-open=false;></span></a>
								
							</li>
							
												
						</ul>
					</div>
					
			<footer style="width: 100%;background-color: lightblue;position: fixed;bottom: 0;">
				<div class="container" style="padding: 0.2rem;">
					<a href="" class="pull-left"><span class="glyphicon glyphicon-info-sign"></span></a>
				</div>
			</footer>	
							
						
					
				</div>
			<!--</div>-->
			
			
			
		</aside>
	
		<!--<article>
			<div class="container" >
				<section style="margin-top: 0.1rem;">
					<a href="">
					<div class="panel panel-default">
						<div class="panel-heading">
							<span class="pull-left">1132020202&nbsp;</span> 
								<span>udsauuds</span>
								<span class="pull-right">2017-02-01</span>
								<span class="pull-right" >03:32下午,</span>	
						</div>
						<div class="panel-body">
							<div class="list-group-item ">
								
								<div class="list-group-item-heading" >
									<span class="glyphicon glyphicon-thum
										bs-up pull-right"></span>	
									<p>标题:<span>无标题</span></p>
									<img class="img-use" src="../wwwroot/bootstrap/img/282a35fae6cd7b897af70f3b0a2442a7d8330e98.jpg"/><span style="font-size: 20px;">:</span>
								</div>
								<div class="list-group-item-text" style="word-wrap: break-word;">
									dwakdawhduahiudhawihdaiwuhdiwahdiuawdawhiudwaldawijdawiojdawoi
									<img src="../wwwroot/bootstrap/img/282a35fae6cd7b897af70f3b0a2442a7d8330e98.jpg"/>ewqeqweqwe
								</div>
								</div>
								
							</div>
							
							
					
						<div class="panel-footer" style="position: relative;height: 0.3rem;">
								<span class="glyphicon glyphicon-comment" style="position: absolute;right: 0.3rem;top: 0.05rem;"></span>
								<span id="thumbs-up-count" style="position: absolute;right: 0.1rem;top: 0.001rem;">0</span>
						</div>
					</div>
					</a>
				</section>
				
				
			</div>
			
				
			
		</article>-->
		
		
		
		
		<!--<section>-->
					<!--<ul class="list-group">
						<li class="list-group-item ">	
								<span class="pull-left">1132020202&nbsp;</span> 
								<span>udsauuds</span>
								<span class="pull-right">2017-02-01</span>
								<span >03:32下午,</span>							
						</li>
						<li class="list-group-item">						
								<span class="glyphicon glyphicon-thumbs-up pull-right"></span>
							<div class="list-group-item-heading">
								<p>标题</p>
								<img src=""/>
							</div>
							<div class="list-group-item-text">
								oh my god!dwadaudhuaihdaiduahdiuahdihauhdahudhauiwhiddwadawudauwhduiawhdiuahwidhauhiudahwi
							</div>
						</li>
						<li class="list-group-item">
							<span class="glyphicon glyphicon-comment"></span>
							<span class="pull-right">0</span>
						</li>
					</ul>
					
				</section>-->
		
	</body>
</html>
<script src="../wwwroot/libs/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../wwwroot/libs/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="../wwwroot/libs/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

$(function(){
	
	
	
	// 随窗口的大小改变rem
	function vwFun(){
		var vw = $(window).innerWidth();
		
		if(vw>=720){
			$("html").css("font-size",100);
		}
		else{
			$("html").css("font-size",vw/720*130);
		}
	}
	vwFun();
	$(window).resize(function(){
		vwFun();
	});
	var arg = "";
	var mFooter = $("#main footer")
	$("#side-coll").click(function(){
		console.log(mFooter);
		if(!$("#main").data("slide")){			
			$("#main").data("slide",true);
			$(".guard").show();
			$("#main").add(mFooter).add($("#indexHead")).add(".guard").stop().animate({left:"4.6rem"},function(){
				
				$(".guard").on("click",function(event){
					
					arg =arguments;
					$("#main").add($("#indexHead")).add(mFooter).add(".guard").stop().animate({left:0},function(){
							$("#main").data("slide",false)
							$(".guard").hide();													
					})
				
				});
				
			});
			$("body").css("overflow","hidden")
//			mFooter.stop().animate({left:"4.6rem"})
		}else{
			$("#main").data("slide",false);
			$("#main").add(mFooter).add($("#indexHead")).add(".guard").stop().animate({left:0});
			$("#main").css("overflow","scroll");
			$(".guard").hide();	
			$("body").css("overflow","scroll")
			
		}
	});
	
	
	$("#mes-cpe").click(function(){
		$(".messageBox").stop().slideToggle();
	})
	
	// 侧滑栏下拉列表
	$(".mydropdown").click(function(){
		
		if(!$(this).find("span").data("open")){
			$(this).find("span").attr("class","glyphicon glyphicon-chevron-right pull-right").data("open",true)
		}else{
			$(this).find("span").attr("class","glyphicon glyphicon-chevron-down pull-right").data("open",false)
			
		}
		var index = $(this).index() / 2;  
		console.log(index);
		console.log($(".mydropdown").length)
		console.log($(this).find("span").data("open"));
		$(".my-menu").eq(index).stop().slideToggle();
		
	})
	
	
	
	
});

 

	
</script>



